<template>
  <div>
    <!-- 1.拆分组件 -->
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表 -->
    <v-list @willUpdate="willUpdate" :list="list" @init="init"></v-list>
    <!-- 弹框 -->
    <!-- 2.5传递status给form  -->
    <v-form :status="status" @init="init" :list="list" ref="form"></v-form>
  </div>
</template>
<script>
// 2.弹框出现和消失
// 3.列表数据
import { reqrolelist } from "../../http/api";
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { statusMixins } from '../../mixins';
export default {
  components: {
    vList,
    vForm,
  },
  mixins:[statusMixins],
  props: [],
  data() {
    return {
      
      // 3.1初始值
      list: [],
    };
  },
  mounted() {
    // 3.2发起列表请求
    this.init()
  },
  methods: {
   
    //4.2获取列表
    init() {
      

      reqrolelist().then(res=>{
        if(res.data.code==200){
          // 后端如果没有数据，返回的是null,但是el-table的data要数组，所以如果是null,转为[]
          this.list=res.data.list?res.data.list:[]
        }
      })
    },
  },

  computed: {},
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>